<template>
    <van-cell label-class="order-detail-address-l2" title-class="order-detail-address-title">
        <template #icon>
            <van-icon name="location-o" :size="18"/>
        </template>
        <template #title>
            <div class="order-detail-address-l1">
                {{address.lastName}}{{address.firstName}} {{address.phone}}
            </div>
        </template>
        <template #label>
          {{address.province}}{{address.city}}{{address.county}}
          {{address.address}}
        </template>
    </van-cell>
</template>

<script>
  import { Cell, Icon } from "vant"

  export default {
    name: "OrderDetailAddress",
    components: {
      [Cell.name]: Cell,
      [Icon.name]: Icon,
    },
    props: {
      address: Object,
    },
  }
</script>

<style lang="scss" scoped>
    .van-cell {
        padding: 18px 9px;

        &:before {
            position: absolute;
            right: 0;
            bottom: 1px;
            left: 0;
            height: 4px;
            background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
            background-size: 80px;
            content: '';
        }
    }

    .order-detail-address-title {
        margin-left: 9px;
    }

    .order-detail-address-l1 {
        font-weight: 700;
        line-height: 1rem;
    }

    .order-detail-address-l2 {
        font-size: 13px;
    }
</style>
